<template>
	<view class="comp-backpack">
		<view class="hd">
			<view class="title">背包<span class="backpack_count">[{{player.backpack.length}}/{{player.backpack_count}}]</span></view>
			<view class="operate-buttons">
				<view class="item" @click="lock_status = !lock_status;sell_status = false">上锁</view>
				<view class="item" @click="arrange(player.backpack)">整理</view>
			</view>
		</view>
		<view class="bd" :class="[sell_status ? 'sell' : '',lock_status ? 'lock' : '']" @contextmenu.native="sell_status = false;lock_status=false">
			<view :class="['item']" v-for="(item,index) in player.backpack_count" :key="index">
				<block v-if="player.backpack[index]">
					<comp-equip-item comparison @click.native="equip_click(player.backpack[index])" :equipDataVolume="player.backpack[index]" @contextmenu.native="put_on_equip(player.backpack[index])"></comp-equip-item>
				</block>
				
				<view class="lock" v-if="player.backpack[index] && player.backpack[index].lock">
					<image class="lock-ico" src="../../static/icon/lock.png" mode=""></image>
				</view>

				<block v-if="player.backpack[index] && player.equip.find(item => item.region == player.backpack[index].region)">
					<image
						v-if="$formula.equip_power(player.backpack[index]) > $formula.equip_power(player.equip.find(item => item.region == player.backpack[index].region)) "
						class="power-arrow-up" src="../../static/icon/arrow-up.png">
					</image>
				</block>

			</view>
		</view>
		
		<view class="retrieve-config-box" v-if="retrieve_config_box_show">
			<view class="plane">
				<view class="retrieve-value qlty">
					<uni-data-checkbox multiple :value="player.retrieveValue.qlty" :localdata="localdata.qlty" @change="(e) => updateRetrieveValue(e,'qlty')"/>
				</view>
			</view>
			<view class="retrieve-btn" @click="confirmRetrieve">确认</view>
		</view>
		
		<view class="ft">
			<view class="token">
				<view class="item"><view class="label">金币</view><view class="value">{{player.resource.coin.toLocaleString('en-US')}}</view></view>
				<view class="item"><view class="label">元宝</view><view class="value">{{player.resource.gem.toLocaleString('en-US')}}</view></view>
			</view>
			<view class="operate-buttons">
				<view class="btn retrieve-btn" @click="retrieve_config_box_show = !retrieve_config_box_show">自动回收</view>
				<view class="btn" @click="sell_status = !sell_status;lock_status = false">手动出售</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from "vuex";
	import compEquipItem from "@/components/comp-equip-item/comp-equip-item"
	export default {
		name:"comp-backpack",
		components:{
			compEquipItem
		},
		computed : {
			...mapState(['mod_player']),
			player(){
				return this.mod_player.player
			}
		},
		data() {
			return {
				tmpRetrieveValue : {},
				localdata : {
					qlty : [{"value": 1,"text": "普通"},{"value": 2,"text": "优秀"},{"value": 3,"text": "传说"},{"value": 4,"text": "史诗"}]
				},
				retrieve_config_box_show : false,
				sell_status : false,
				lock_status : false,
			};
		},
		methods : {
			put_on_equip(equipDataVolume){
				this.sell_status = false;
				this.$store.commit('mod_player/commit_put_on_equip',equipDataVolume)
			},
			updateRetrieveValue(e,type){
				this.tmpRetrieveValue = {
					type,
					value : e.detail.value
				};
			},
			confirmRetrieve(){
				this.$store.commit('mod_player/update_retrieve_value',this.tmpRetrieveValue);
				this.retrieve_config_box_show = false;
			},
			equip_click(equipDataVolume){
				
				if(this.sell_status){
					this.$store.commit('mod_player/commit_retrieve_equip',equipDataVolume);
					uni.$emit('equip_pop', '');
				}
				
				if(this.lock_status){
					this.$store.commit('mod_player/commit_equip_lock',equipDataVolume);
				}
				
				
			},
			arrange(backpack) {
			    return backpack.sort((a, b) => {
			        if (a.region === b.region) {
			            return b.qlty - a.qlty; // descending order for qlty
			        }
			        return a.region - b.region; // ascending order for region
			    });
			}
		}
	}
</script>

<style lang="scss">
	.comp-backpack{
		display: flex;
		flex-direction: column;
		flex:1;
		.hd{
			height:40px;
			border-bottom: 1px solid #000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.title{
				margin-left:10px;
				.backpack_count{
					font-size:12px;
					margin-left:10px;
				}
			}
			.operate-buttons{
				display: flex;
				gap:10px;
				margin-right:10px;
				.item{
					border: 1px solid #000;
					height:22px;
					width:48px;
					display: flex;
					align-items: center;
					justify-content: center;
					background-color: $game-color-2;
					cursor: pointer;
				}
			}
			
		}
		.bd{
			flex: 1 1 auto;
			height: 0;
			display: flex;
			
			align-content: flex-start;
			overflow-y: auto;
			box-sizing: border-box;
			flex-wrap: wrap;
			padding-top:10px;
			&.sell{
				cursor: url('../../static/icon/cursor-coin.png'), pointer;
			}
			&.lock{
				cursor: url('../../static/icon/lock.png'), pointer;
			}
			.item{
				border: 1px solid #000;
				margin:0 0 10px 10px;
				width:50px;
				height:50px;
				box-sizing: border-box;
				border-radius: 4px;
				overflow: hidden;
				background-color: $game-color-2;
				position: relative;
				.power-arrow-up{
					width:10px;
					height:10px;
					position: absolute;
					bottom:2px;
					right:2px;
				}
				.lock{
					width:16px;
					height:16px;
					position: absolute;
					top:0px;
					right:0px;
					background-color: rgba(0,0,0,.7);
					border-bottom-left-radius: 50%;
				}
				.lock-ico{
					width:10px;
					height:10px;
					position: absolute;
					top:2px;
					left:4px;
				}
			}
		}
		
		.retrieve-config-box{
			padding:10px;
			border-top: 1px solid #000;
			.retrieve-btn{
				margin-top:5px;
				border: 1px solid #000;
				background-color: $game-color-2;
				width:fit-content;
				height:24px;
				padding:0 10px;
				display: flex;
				align-items: center;
				cursor: pointer;
			}
		}
		
		
		.ft{
			
			border-top: 1px solid #000;
			display: flex;
			align-items: center;
			justify-content: space-between;
			height:80px;
			.token{
				display: flex;
				flex-direction: column;
				gap:8px;
				.item{
					display: flex;
					align-items: center;
					
					.label{
						margin-left:10px;
						margin-right:10px;
					}
					.value{
						background-color: $game-color-2;
						border: 1px solid #000;
						width:200px;
						height:24px;
						display: flex;
						align-items: center;
						border-radius: 4px;
						text-indent: 5px;
					}
				}
			}
			.operate-buttons{
				display: flex;
				height:100%;
				padding-bottom:11px;
				padding-right:10px;
				flex-direction: column;
				justify-content: flex-end;
				gap: 10px;
				.btn{
					background-color: $game-color-2;
					border: 1px solid #000;
					height:24px;
					padding:0 10px;
					display: flex;
					align-items: center;
					cursor: pointer;
				}
			}
		}
	}
</style>